{extend name="main"}
{block name="style"}
{css href="__TEMPLATE_STATIC__/user.css"}
{/block}
{block name="header"}
{include file="module/user_top_nav"/}
{/block}
{block name="body"}
<div class="flex1 flex h-100">
	<div class="w-180px bg-dark p-4 overflow-y-auto">
	{include file="module/user/personal_left"/}
	</div>
	<div class="frame-body flex-1 overflow-y-auto py-3">
		<div class="container-xl bg-white shadow">
			<div class="flex">
				<div class="flex-1 block-title-before py-2">简历作品</div>
			</div>
			<div class="bg-1E54E5 p-3 mt-3 flex">
				<div><i class="el-icon-warning h3 mb-0 text-primary"></i></div>
				<div class="flex-1 pl-2">
					<h6 class="text-primary">小提示</h6>
					<div class="text-secondary">最多可上传8张，已上传 1 张，每张最大800KB，支持jpg/png格式。</div>
				</div>
			</div>
			<el-divider content-position="left">选择上传方式</el-divider>
			<div class="p-3">
				<div class="border flex py-5 text-center">
					<div class="flex-1">
						<img src="/displayQrcode?scheme={xycms:web name='shearurl'}/resume_works&icon=1" height="100">
						<div class="h6 pt-3">方式一：手机扫码上传</div>
						<div class="text-secondary">推荐使用手机扫码上传图片，更方便</div>
					</div>
					<div class="flex-1 border-left">
					  	<el-upload
							  class="avatar-uploader"
							  action="/uploadFiles"
							  name="file"
							  accept="image/*"
							  :data="{path:'resume/works'}"
							  :show-file-list="false"
							  :on-success="handleAvatarSuccess"
							  :on-error="handleAvatarError">
							  <div class="border border-lg rounded-lg w-100px h-100px text-v-center border-secondary">
							  	<i class="el-icon-plus h1 mb-0 text-secondary font-weight-bold"></i>
							  </div>
						</el-upload>
						<div class="h6 pt-3">方式二：本地上传</div>
						<div class="text-secondary">jpg/png格式（大小1MB以内）</div>
					</div>
				</div>
			</div>
			<div v-if="form.works.length>0">
				<el-divider content-position="left">待保存的作品照片</el-divider>
				<div class="p-3 row works-img">
					<div class="col-3" v-for="(v,index) in form.works">
						<el-image
					      style="max-width: 100%;height: 200px;"
					      :src="v.url"
					      fit="cover"
					      :title="v.title"
					      :preview-src-list="img"></el-image>
						<div class="flex pt-2">
							<div class="flex-1 text-info">(待保存)</div>
							<div class="pr-2">
								<el-popover
								    placement="bottom"
								    width="200"
								    trigger="click"
								    v-model="v.visible">
									<div style="text-align: right; margin: 0">
										<el-input v-model="v.title" class="pl-0 pr-0 mb-2" size="mini"></el-input>
									    <el-button size="mini" type="text" @click="v.visible = 0">取消</el-button>
									    <el-button type="primary" size="mini" @click="v.visible = 0">确定</el-button>
									</div>
									<el-link type="success" :underline="false" class="small" slot="reference">备注</el-link>
								</el-popover>
							</div>
							<div>
								<el-link type="danger" :underline="false" class="small" @click="delItem(index,v)">删除</el-link>
							</div>
						</div>
					</div>
				</div>
				<div class="pt-3">
				    <el-button type="primary" @click="submitForm">立即保存</el-button>
				</div>
			</div>
			<el-divider content-position="left">已上传作品照片</el-divider>
			<div class="p-3 row works-img">
				<div class="col-3" v-for="(v,index) in list">
					<el-image
				      style="max-width: 100%;height: 200px;"
				      :src="v.url"
				      fit="cover"
				      :title="v.title"
				      :preview-src-list="list_img"></el-image>
					<div class="flex pt-2">
						<div class="text-truncate w-60px">{{v.create_time}}</div>
						<div class="flex-1 text-info text-nowrap" v-if="v.status===0">(待审核)</div>
						<div class="flex-1 text-success text-nowrap" v-if="v.status===1">(审核通过)</div>
						<div class="flex-1 text-danger text-nowrap" v-if="v.status===2">(审核失败)</div>
						<div class="pr-2">
							<el-popover
							    placement="bottom"
							    width="200"
							    trigger="click"
							    v-model="v.visible">
								<div style="text-align: right; margin: 0">
									<el-input v-model="v.title" class="pl-0 pr-0 mb-2" size="mini"></el-input>
								    <el-button size="mini" type="text" @click="v.visible = 0">取消</el-button>
								    <el-button type="primary" size="mini" @click="submitItemTitle(v)">确定</el-button>
								</div>
								<el-link type="success" :underline="false" class="small" slot="reference">备注</el-link>
							</el-popover>
						</div>
						<div>
							<el-link type="danger" :underline="false" class="small" @click="delItem(index,v)">删除</el-link>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</div>
{/block}
{block name="footer"}
{include file="module/login"/}
{/block}
{block name="script"}
<script type="text/javascript">
	{empty name="list"}
	var list=[];
	var list_img=[];
	{else/}
	var list={:json_encode($list,JSON_UNESCAPED_UNICODE)};
	var list_img={:json_encode($list_img,JSON_UNESCAPED_UNICODE)};
	{/empty}
</script>
<script type="text/javascript">
	var vm=new Vue({
		el:'#app',
		data:{
			view:XYBase.view,
			userInfo:UserInfo,
			loginTabs:XYBase.loginTabs,
			feedback:XYBase.feedback,
			img:[],
			list:list,
			list_img:list_img,
			form:{
				works:[]
			}
		},
		watch:{
		    view:XYBase.viewWatch,
		    loginTabs:XYBase.loginTabsWatch,
			userInfo:{
				handler(val,oldVal){
					if (!val.id) {
						window.location.reload();
					}
				},
				deep:true
			},
		},
		created(){
			XYBase.created(this);
		},
		methods:XYBase.methods({
			handleAvatarSuccess:function(res, file) {
				if(res){
					if(res.code === 0){
						if(res.data.type == 'resume/works'){
							this.form.works.push({
								id:0,
								url:res.data.url,
								path:res.data.path,
								visible:0,
								title:''
							});
							this.img.push(res.data.url);
						}
						XYBase.success(res.msg);
					}else{XYBase.error(res.msg);}
				}else{XYBase.error(XYBase.config.system_network_error)}
			},
			handleAvatarError:function(res, file) {
	          	XYBase.error(XYBase.config.system_network_error)
			},
			submitItemTitle(row) {
				var _this=this;
				const loading=XYBase.openloading();
				_this.sendGet({
					url:'/user/resume/saveResumeWorksTitle/'+row.id+'/'+row.title,
				},function(ret){
					loading.close();
					if (ret) {
						if (ret.code === 0) {
							row.visible=0;
			        		XYBase.success('已保存');
						}else XYBase.msg(ret.msg);
					}
				});
			},
			delItem(index,row){
				var _this=this;
				_this.$confirm('确定要删除【'+row.title+'】作品照片吗？', '提示', {
		          confirmButtonText: '删除',
		          cancelButtonText: '取消',
		          type: 'warning'
		        }).then(() => {
					if (row.id) {
						const loading=XYBase.openloading();
						_this.sendGet({
							url:'/user/resume/delResumeWorks/'+row.id,
						},function(ret){
							loading.close();
							if (ret) {
								if (ret.code === 0) {
									_this.list.splice(index,1);
					        		XYBase.success('已删除');
								}else XYBase.msg(ret.msg);
							}
						});
					}else{
						_this.form.works.splice(index,1);
						_this.img.splice(index,1);
		        		XYBase.success('已删除');
					}
		        }).catch(() => {
		        	XYBase.msg('已取消');
		        });
			},
			submitForm(){
				var _this=this;
				var D=_this.form;
				if (_this.form.works.length<=0) return XYBase.warning('请先上传照片');
				const loading = XYBase.openloading();
				_this.sendPost({
					url:'/user/resume/saveResumeWorks',
					data:D,
				},function(ret){
			        loading.close();
			        if (ret) {
						if(ret.code == 0){
							_this.img=[];
							_this.form.works=[];
							XYBase.success(ret.msg);
						}else{
							XYBase.msg(ret.msg);
						}
			        }
				});
			}
		})
	});
</script>
{/block}